<template>
  <div class="w-full pl-3.5 lg:pl-0 lg:pt-9 mb-3 lg:mb-16 lg:w-100 lg:mx-auto" v-if="specialDealList.length">
    <!-- title -->
    <div class="flex items-center mb-3 lg:mb-6">
      <WImage class="mr-3 w-6 h-6 lg:hidden rtl:ml-3" :src="useAsset('pc-home/h5home_special.png')" />
      <h1 class="text-xl font-bold lg:text-lg text-white uppercase font-mono">Special Deals</h1>
    </div>
    <!-- 商品列表  小屏-->
    <div class="flex lg:hidden overflow-x-auto scroll">
      <nuxt-link
        external
        :to="$localePath(`/goods/${item.goodsSku?.goods?.urlName || item.goodsSku?.goods?.id}`)"
        class="shrink-0 mr-4 w-[100px]"
        v-for="(item, index) in specialDealList"
        :key="index">
        <div class="relative">
          <YImage
            :alt="`how to top up ${item.goodsSku?.goods?.name}`"
            class="h-[100px] w-[100px] rounded overflow-hidden mb-1 mx-auto object-cover"
            :src="item.goodsSku?.goods?.smallIcon || item.goodsSku?.smallIcon"
            height="100" />
          <!-- 阴影 -->
          <span class="absolute bottom-1 left-1 overflow-hidden bg-[#15AA7F] text-xs text-white px-1 rounded-sm">
            - {{ item?.goodsSku?.discount }}%
          </span>
        </div>
        <h3 class="text-sm leading-[20px text-white line-clamp-2 break-words text-center">
          {{ item.goodsSku?.goods?.name }}
        </h3>
      </nuxt-link>
    </div>
    <!-- 商品列表 大屏-->
    <div class="hidden lg:grid grid-cols-4 gap-x-6 gap-y-10">
      <DiscountItem
        v-for="(item, index) in specialDealList"
        :key="index"
        :discount-goods-info="item"
        :colorBg="colorList[index % colorList.length]"
        :isDetail="true" />
    </div>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import { useRequest } from '~/composables/useRequest'
import { useHomeStore } from '~/store/home'
import WImage from '../logic/WImage.vue'
import NewDiscountItem from '~/components/home/NewDiscountItem.vue'
import DiscountItem from '~/components/home/DiscountItem.vue'

const colorList = ['#452F52', '#253338', '#22264F', '#293825', '#413326', '#232C12', '#413326', '#163141']
const homeStore = useHomeStore()
// 服务端渲染的数据
const { data: specialDealList } = await useLazyAsyncData(
  async () => {
    return homeStore.initSpecialDealList(1)
  },
  { default: () => [] as any },
)
</script>

<style scoped lang="scss">
.h5-bg {
  background: url(/assets/images/pc-home/h5home_exclusive_pic@2x.webp) no-repeat;
  background-position: left top;
  background-size: 375px, 493px;
  // background-attachment: fixed;
}

.pc-bg {
  background: url(/assets/images/pc-home/pchome_exclusive_pic0@2x.webp) no-repeat;
  background-position: left top;
  background-size: 375px, 493px;
}

.scroll::-webkit-scrollbar {
  //隐藏或取消滚动条
  display: none;
}
</style>
